<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>个人设置</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="../js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入axios -->
		<script src="../js/axios.js"></script>
		<script src="../js/qs.js"></script>
		<!-- 导入jquery -->
		<script src="../js/jquery.min.js"></script>
	</head>
	<body>
		<div id="max" style="border-radius: 1%;">
			<div id="apphard" style="overflow:hidden ;border-radius: 3%;">
				<span style="font-size: 18px; margin-left:  10px; line-height: 60px;">个人信息</span>
				<el-button plain @click="updatpass" style="float:right ;margin: 0; margin-right: 2%;margin-top: 1%;">修改密码</el-button>
				<el-button plain @click="updateuser" style="float:right ;margin: 0; margin-right: 2%;margin-top: 1%;">编辑个人信息</el-button>
			</div>


			<el-dialog title="修改密码:" :visible.sync="dialogPassVisible" width="40%">
				<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
				<el-form :model="form1" :rules="rules" ref="form1" label-width="100px" class="demo-form1">
					<el-form-item label="原密码:" prop="uPassword" label-width="100px">
						<el-input  type="password" placeholder="" v-model="form1.uPassword" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="新密码:" prop="pwd1"  label-width="100px">
						<el-input   type="password" placeholder="" v-model="form1.pwd1" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="确认密码:"  prop="pwd2" label-width="100px">
						<el-input  type="password" placeholder="" v-model="form1.pwd2" style="width: 90%;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogPassVisible = false">取 消</el-button>
					<!-- dialogFormVisible = false -->
					<el-button type="primary" @click="updatepassinfo('form1')">确定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="编辑个人信息:" :visible.sync="dialogPhysicalVisible" width="40%">
				<hr style="border: 0.5px solid #666666;margin: -15px 0px 35px;" />
				<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
					<el-form-item label="头像:" label-width="100px">
						<el-upload ref="upload" action="/upload" name="picture" list-type="picture-card" :limit="1" :file-list="fileList"
						 :on-exceed="onExceed" :before-upload="beforeUpload" :on-preview="handlePreview" :on-success="handleSuccess"
						 :on-remove="handleRemove">
							<i class="el-icon-plus"></i>
						</el-upload>
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</el-form-item>
					<!-- <el-input  placeholder="" v-model="physicalform.ogPhysical"
						 style="width: 90%;"></el-input> -->
					<el-form-item label="用户名:" label-width="100px">
						<el-input placeholder="" v-model="form.uName" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="性别:" label-width="100px">
						<template>
							<el-radio v-model="form.uSex" label="1005">男</el-radio>
							<el-radio v-model="form.uSex" label="1006">女</el-radio>
						</template>
					</el-form-item>
					<el-form-item label="手机号:" required prop="uPhone" label-width="100px">
						<el-input placeholder="" v-model="form.uPhone" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="身份证号:" required prop="uIdcard" label-width="100px">
						<el-input placeholder="" v-model="form.uIdcard" style="width: 90%;"></el-input>
					</el-form-item>
					<el-form-item label="邮箱:" required prop="uEmail" label-width="100px">
						<el-input placeholder="" v-model="form.uEmail" style="width: 90%;"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogPhysicalVisible = false">取 消</el-button>
					<!-- dialogFormVisible = false -->
					<el-button type="primary" @click="updateUserinfo('form')">确定</el-button>
				</div>
			</el-dialog>

			<hr />
			<el-form ref="repform" label-width="100px" class="demo-repform" style="width: 90%;margin-top: 20px;margin-left:4%;">
				<el-row>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="头像:" label-width="100px">
							<img style="width:100px;height: 100px; margin-left:80px; border-radius: 50%;" :src="imgUrl" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="用户编号:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.uId}</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="用户名:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.uName}</div>
						</el-form-item>
					</el-col>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="所属部门:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.deptName}</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="性别:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">
								${userp.sex}</div>
						</el-form-item>
					</el-col>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="身份证号:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.uIdcard}</div>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="手机号:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.uPhone}</div>
						</el-form-item>
					</el-col>
					<el-col :span="10" style="margin-left:40px;">
						<el-form-item label="邮箱:" label-width="100px">
							<div style="border-bottom: 1px solid #DCDCDC;height: 35px;font-size: 12px;">${userp.uEmail}</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<script type="text/javascript">
			//手机号验证
			var validateIdChar = (rule, value, callback) => {
				var myreg = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
				if (!myreg.test(value)) {
					callback(new Error('请输入正确的身份证号'));
				} else {
					callback();
				}
			};
			//手机号验证
			var validatephon = (rule, value, callback) => {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(value)) {
					callback(new Error('请输入正确的手机号'));
				} else {
					callback();
				}
			};
			//邮箱验证
			var validateem = (rule, value, callback) => {
				var myreg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!myreg.test(value)) {
					callback(new Error('请输入正确的邮箱'));
				} else {
					callback();
				}
			};
			var vaildapwd = (rule, value, callback) => {
				if (value != ${
						user.uPassword
					}) {
					callback(new Error('请输入正确的密码'));
				} else {
					callback();
				}
			};
			var Max = new Vue({
				el: "#max",
				data: {
					imgUrl: '${userp.uHeadimg}',
					dialogPhysicalVisible: false,
					dialogPassVisible: false,
					form: {
						headimg: '${userp.uHeadimg}',
						uName: '${userp.uName}',
						uSex: '${userp.uSex}',
						uIdcard: '${userp.uIdcard}',
						uPhone: '${userp.uPhone}',
						uEmail: '${userp.uEmail}',
					},
					form1: {
						uPassword: '',
						pwd1: '',
						pwd2: ''
					},
					repform: {

					},
					file: '',
					//文件上传的参数
					dialogImageUrl: '',
					dialogVisible: false,
					//图片列表（用于在上传组件中回显图片）
					fileList: [{
						name: '',
						url: '${userp.uHeadimg}',
					}],
					rules: {
						pwd1: [{
							validator: (rule, value, callback) => {
								var myreg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
								if (!myreg.test(value)
									) {
									callback(new Error('请输入8到16位数字与字母组合'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}],
						pwd2: [{
							
							validator: (rule, value, callback) => {
								if (Max.form1.pwd1 != value 
									) {
									callback(new Error('两次密码不一致'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}],
						uPassword: [{
							validator: vaildapwd,
							trigger: 'blur'
						}],
						uPhone: [{
							validator: validatephon,
							trigger: 'blur'
						}],
						uEmail: [{
							validator: validateem,
							trigger: 'blur'
						}],
						uIdcard: [{
							validator: validateIdChar,
							trigger: 'blur'
						}]
					},
				},
				methods: {
					updateuser() {
						this.dialogPhysicalVisible = true;
					},
					updatpass() {
						this.dialogPassVisible = true;
					},
					updatepassinfo(form) {
						var _this = this;
						this.$refs[form].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/authority/updatePwd",
									//参数转换
									Qs.stringify(
										this.form1, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									showAtRight('/authority/personalSettings');
									_this.dialogPassVisible = false; 
								})
								/* .catch(function(){
																alert("出错了");
																 _this.dialogPhysicalVisible = false; 
															}); */
							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					updateUserinfo(form) {
						var _this = this;
						this.form.headimg = this.imgUrl;
						this.$refs[form].validate((valid) => {
							if (valid) {
								//post提交数据
								axios.post("/authority/updateUserinfo",
									//参数转换
									Qs.stringify(
										this.form, {
											arrayFormat: 'brackets'
										})
									//	params:
									//ajax请求成功的回调函数
								).then(function(v) {
									console.log("回调成功，获取了服务器端返回的值v");
									console.log(v);
									showAtRight('/authority/personalSettings');
									_this.dialogPhysicalVisible = false;
								})
								/* .catch(function(){
																alert("出错了");
																 _this.dialogPhysicalVisible = false; 
															}); */
							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					//文件上传
					getFile(event) {
						this.file = event.target.files[0];
						console.log(this.file);
					},
					addImage(event) {
						event.preventDefault();
						let formData = new FormData();
						formData.append('file', this.file);
						let config = {
							/* headers: {
								'Content-Type': 'multipart/form-data'
							} */
						}
						axios.post('/authority/singlefile', formData /* , config */ ).then(function(response) {
							if (response.status === 200) {
								console.log(response.data);
							}
						})
					},
					handleSuccess(res, file) {
						this.$message({
							type: 'info',
							message: '图片上传成功',
							duration: 6000
						});
						if (file.response.success) {
							this.imgUrl = file.response.message; //将返回的文件储存路径赋值picture字段
						}
					},
					//选择图片方法
					changIcon() {
						alert("选择图片");
						this.changIcondialog = true;
					},
					//删除文件之前的钩子函数
					handleRemove(file, fileList) {
						this.$message({
							type: 'info',
							message: '已删除原有图片',
							duration: 6000
						});
					},
					//点击列表中已上传的文件事的钩子函数
					handlePreview(file) {},
					//上传的文件个数超出设定时触发的函数
					onExceed(files, fileList) {
						this.$message({
							type: 'info',
							message: '最多只能上传一个图片',
							duration: 6000
						});
					},
					//文件上传前的前的钩子函数
					//参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
					beforeUpload(file) {
						const isJPG = file.type === 'image/jpeg';
						const isGIF = file.type === 'image/gif';
						const isPNG = file.type === 'image/png';
						const isBMP = file.type === 'image/bmp';
						const isLt2M = file.size / 1024 / 1024 < 2;

						if (!isJPG && !isGIF && !isPNG && !isBMP) {
							this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
						}
						if (!isLt2M) {
							this.$message.error('上传图片大小不能超过 2MB!');
						}
						return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
					},
					updateUser() {

					}
				},
				mounted() {}
			})
		</script>




	</body>

</html>
